/*
 * @Author: xiaosihan 
 * @Date: 2024-06-21 06:34:34 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-06-21 12:57:07
 */


// blastContorl
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./blastContorl.module.less";
import { Select, Slider, Checkbox } from "antd";
import homeStore from "@views/home/homeStore";
import { round } from "lodash";

interface Iprops {
    children?: ReactNode
}

// 爆炸控制器
export default function BlastContorl() {


    const [currentModal, setCurrentModal] = useState(homeStore.currentModal);
    const [blastProgress, setBlastProgress] = useState(homeStore.blastProgress);
    const [hideNotActive, setHideNotActive] = useState(homeStore.hideNotActive);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setCurrentModal(homeStore.currentModal);
        setBlastProgress(homeStore.blastProgress);
        setHideNotActive(homeStore.hideNotActive);
    }), []);

    //选择模型
    const change = (v: string) => {
        homeStore.setCurrentModal(v);
    }

    //设置爆炸进度
    const modifyBlastProgress = (v: number) => {
        homeStore.setBlastProgress(v);
    }

    //是否显示其他回调
    const showOther = (e: any) => {
        homeStore.setHideNotActive(e.target.checked);
    }

    return (
        <div className={styles.blastContorl} >
            选择模型 :
            <Select
                className={styles.select}
                value={currentModal}
                onChange={change}
                options={[
                    { value: './柴油发动机.glb', label: "柴油发动机" },
                    { value: './轿车发动机.glb', label: "轿车发动机" },
                ]}
            />
            <br />
            爆炸范围 :
            <Slider
                className={styles.slider}
                value={blastProgress}
                min={0}
                max={1}
                step={0.01}
                onChange={modifyBlastProgress}
            />
            &nbsp;
            {round(blastProgress, 1)}
            <br />
            <Checkbox
                onChange={showOther}
                checked={hideNotActive}
            >
                是否显示未选中模型
            </Checkbox>
        </div>
    );

}